<template>
  <div v-loading="loading" style="height: 500px">
    <div class="head">
      <div class="head_left">
        <img src="@/static/index/icon_yhsy.png" alt="" />
        <span>用户使用热门资产价值排行TOP10</span>
      </div>
      <div class="head_right">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in dropdowmLs"
              :key="index"
              @click.native="change(index)"
              >{{ item }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="table">
      <div
        class="table_box"
        v-for="(item, index2) in tableLs"
        :key="index2"
        @click="choice(index2)"
      >
        <div
          class="table_detail"
          :class="changeIndex == index2 ? 'spchoosetext' : ''"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="list_box">
      <div class="list" v-for="(item, index3) in list" :key="index3">
        <div class="rankLeft">
          <img src="@/static/index/Rank1.png" alt="" v-if="index3 == 0" />
          <img src="@/static/index/Rank2.png" alt="" v-if="index3 == 1" />
          <img src="@/static/index/Rank3.png" alt="" v-if="index3 == 2" />
          <div class="ranknum" v-if="index3 != 0 && index3 != 1 && index3 != 2">
            {{ index3 + 1 }}
          </div>
        </div>
        <div class="name ellipseHide">{{ item.assetName }}</div>
      </div>
      <div class="list_null" v-if="list.length == 0">暂无数据</div>
    </div>
  </div>
</template>
<script>
import { customerHotTopN } from "@/api/index";
export default {
  name: "MerchantReleaseRank",
  data() {
    return {
      dropdowmLs: ["昨日", "本周", "本月"],
      name: "昨日",
      tableLs: ["积分", "券"],
      changeIndex: 0,
      dateType: 3, //时间类型 本周 1  本月 2  昨日 3
      assetType: 1, //统计类型 1 积分  2券     3联合券（预留）
      list: [],
    };
  },
  created() {
    this.customerHotTopN();
  },
  methods: {
    change(e) {
      console.log(e);
      if (e == 0) {
        this.name = "昨日";
        this.dateType = 3;
      } else if (e == 1) {
        this.name = "本周";
        this.dateType = 1;
      } else {
        this.name = "本月";
        this.dateType = 2;
      }
      this.customerHotTopN();
    },
    choice(e) {
      this.changeIndex = e;
      if (e == 0) {
        this.assetType = 1;
      } else if (e == 1) {
        this.assetType = 2;
      } else {
        // this.name = "本月";
      }
      this.customerHotTopN();
    },
    customerHotTopN() {
      const params = {
        dateType: this.dateType,
        assetType: this.assetType,
        pageSize: 10,
      };
      this.loading = true;
      customerHotTopN(params).then((res) => {
        this.list = res.result;
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// @import '../styles/haveSend';
.ellipseHide {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.name {
  flex: 1;
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  margin: 0 24px;
}
.head_left {
  display: flex;
  align-items: center;
  color: #303133;
  font-size: 16px;
  font-weight: bold;
}
.head_left img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.el-dropdown-link {
  color: #ff9300;
}
.el-dropdown-menu__item:hover {
  background-color: #fff6e6;
  color: #ff9300;
}
.table {
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  margin: 14px 0 0;
}
.table_box {
  width: calc(100% / 2);
  text-align: center;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #303133;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table_detail {
  width: 45%;
  height: 38px;
}
.spchoosetext {
  border-bottom: 2px solid #ff9300;
}
.list_box {
  padding: 21px 37px 0;
}
.list {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #303133;
  margin-bottom: 8px;
}
.list img {
  width: 28px;
  height: 30px;
  margin-top: 3px;
}
.list:last-child {
  margin-bottom: 0;
}
.ranknum {
  width: 20px;
  height: 20px;
  opacity: 1;
  background: #e6f7ff;
  border-radius: 10px;
  color: #02acfe;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}
.rankLeft {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 17px;
}
.list_null {
  font-size: 15px;
  color: #303133;
  text-align: center;
  padding-top: 120px;
}
</style>
